<template>
  <div class="container">
    <el-card>
      <!-- 顶部提示 -->
      <el-row>
        <el-col class="top_title">
          <el-button type="success" icon="el-icon-edit" size="small" @click="increased"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- 顶部搜索表单 -->
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <!-- 学科  -->
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                v-model="query.subjectID"
                placeholder="请选择"
                @change="onSubjectChange"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.subjectName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="query.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in dirList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.directoryName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="query.tags" placeholder="请选择">
                <el-option
                  v-for="item in tList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.tagName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="query.questionType" placeholder="请选择">
                <el-option
                  v-for="typeItem in questionType"
                  :key="typeItem.value"
                  :label="typeItem.label"
                  :value="typeItem.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="query.difficulty" placeholder="请选择">
                <el-option
                  v-for="dItem in difficulty"
                  :key="dItem.value"
                  :label="dItem.label"
                  :value="dItem.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="query.direction" placeholder="请选择">
                <el-option
                  v-for="(dirItem, index) in direction"
                  :key="index"
                  :label="dirItem"
                  :value="dirItem"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="query.creatorID" placeholder="请选择">
                <el-option
                  v-for="sItem in simName"
                  :key="sItem.id"
                  :label="sItem.username"
                  :value="sItem.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 题目 -->
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="query.remarks"></el-input>
            </el-form-item>
          </el-col>

          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!--城市  -->
          <el-col :span="6">
            <el-form-item label="城市" class="city-box" prop="province">
              <el-select
                @change="cityChange"
                v-model="query.province"
                placeholder="请选择"
                class="city-1"
              >
                <el-option
                  v-for="(item, index) in this.provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                prop="city"
                v-model="query.city"
                placeholder="请选择"
                class="city-2"
              >
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button size="mini" @click="clearAll">清除</el-button>
            <el-button type="primary" size="mini" @click="getUserquerestlist()"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 顶部end -->
      <el-alert type="info" class="el-icon-info">
        <template slot="title">一共{{ this.total }}条数据 </template>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="querestlist" style="width: 100%" height="250">
        <el-table-column fixed prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="100">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column label="题型" v-model="questionType">
          <template v-slot="scope">
            {{ questionTypeWrap(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="300">
        </el-table-column>
        <el-table-column  label="录入时间" width="100" v-model="addDate">
          <template v-slot="scope">{{scope.row.addDate | parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="难度" width="100" v-model="difficulty">
          <template v-slot="scope">
            {{ difficultyWrap(scope.row.difficulty) }}
          </template>
        </el-table-column>

        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button
              @click="detailClick(scope.row)"
              type="primary"
              icon="el-icon-message"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
            @click="$router.push('/questions/new')"
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
              @click="deleteFn(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
            @click="choiceAdd(scope.row)"
              type="warning"
              icon="el-icon-check"
              circle
              size="mini"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <questions-preview
      :dialogVisible.sync="dialogVisible"
      :questionsDetail="questionsDetail"
      @close="dialogClose"
    ></questions-preview>
  </div>
</template>

<script>
// 用户列表
import { list as querestlist, detail, remove,choiceAdd } from "@/api/hmmm/questions.js";
import { list } from "@/api/hmmm/subjects.js";
import { list as directorylist } from "@/api/hmmm/directorys";
import { list as tagsList } from "@/api/hmmm/tags";
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
import { simple } from "@/api/base/users.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import QuestionsPreview from "../components/questions-preview.vue";
import {parseTimeByString} from '@/filters/index.js'
// console.log(provinces);
// console.log(citys);

export default {
  data() {
    return {
      query: {
        page: 1, //	否	1	当前页数
        pagesize: 5, // 每页显示多少
        subjectID: null, //学科
        city: null,
        tags: null, //标签名称

        province: null,
        keyword: null, // 关键字
        remarks: null, //	题目备注
        shortName: null, // 企业简称

        creatorID: null, // 录入人
        catalogID: null, // 目录
      },
      questionType: questionType, // 题型
      difficulty: difficulty, //难度
      // addDate:addDate,
      direction: direction, // 	方向
      provincesList: provinces(), //省份，调用的是一个函数
      citysList: [], //城区，城区是一个数组里面的数据
      questionsDetail: {}, //题库详情
      total: 0, //总条数

      querestlist: [], //题库列表
      list: [], //学科列表
      dirList: [], //目录列表
      tList: [], //标签列表
      simName: [], //录入人

      dialogVisible: false,
    };
  },
  components: {
    QuestionsPreview,
  },
  created() {
    this.getUserquerestlist();
    this.getUserlist();
    this.getDirectorylist();
    this.gettagslist();
    this.getSimpleName();
  },
  methods: {
    // 获取题库
    async getUserquerestlist() {
      try {
        const { data } = await querestlist(this.query);
        // console.log(data);
        this.querestlist = data.items;
        this.total = data.counts;
      } catch (err) {
        this.$message("获取题库失败！");
      }
    },
    questionTypeWrap(val) {
      // console.log(val);
      if (val === "1") {
        return "单选";
      } else if (val === "2") {
        return "多选";
      } else {
        return "简答";
      }
    },
    difficultyWrap(val) {
      if (val === "1") {
        return "简单";
      } else if (val === "2") {
        return "一般";
      } else {
        return "困难";
      }
    },
    // 获取学科列表
    async getUserlist() {
      try {
        const { data } = await list();
        //  console.log(data);
        this.list = data.items;
      } catch (err) {
        this.$message("获取学科列表失败！");
      }
    },
    // 获取目录列表
    async getDirectorylist() {
      try {
        const { data } = await directorylist();
        // console.log(data);
        this.dirList = data.items;
      } catch (err) {
        this.$message("获取目录列表失败！");
      }
    },
    //  获取标签
    async gettagslist() {
      const { data } = await tagsList();
      //  console.log(data);
      this.tList = data.items;
    },
    //获取录入人
    async getSimpleName() {
      const { data } = await simple();
      //  console.log(data);
      this.simName = data;
    },
    //  点击城市，获取城区
    cityChange(val) {
      // console.log(val);
      // (this.query.city = ""),
      this.citysList = citys(val);
      // console.log(this.citys);
    },
    // 清除所有表单
    clearAll() {
      this.$refs.form.resetFields();
      this.query.city=null
    },
    // 点击预览详情
    async detailClick(val) {
      const { data } = await detail({
        id: val.id,
      });
      // console.log(data);
      // console.log("detailClick");

      this.questionsDetail = data;
      // console.log(data);
      this.dialogVisible = true;
    },
    // 点击删除
    deleteFn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove({
            id: id,
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getUserquerestlist();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    
    // 关闭弹窗
    dialogClose() {
      this.dialogVisible = false;
    },

    onSubjectChange() {},
  //  查询页码(每页几条)
    handleSizeChange(newPagesize) {
    //  console.log(newPagesize);
     this.query.pagesize=newPagesize
     this.getUserquerestlist()
    },
    // 查询页码
    handleCurrentChange(newPage) {
      this.query.page=newPage
      this.getUserquerestlist()
  
    },
    // 新增
    increased(){
      this.$router.push('/questions/new')
    },
    // 加入精选
    choiceAdd(val){
      console.log(val);
       this.$confirm("此操作将该题目加入精选, 是否继续?",'提示', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
         choiceAdd({
            id: val.id,
            choiceState:1
          });
          this.$message({
            type: "success",
            message: "加入精选题库成功!",
          });
          this.getUserquerestlist();
          this.$router.push('/questions/choice')
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "加入精选题库失败",
          });
        });

    }
  },
};
</script>

<style scoped lang='scss'>
.el-card {
  margin: 10px;
  .top_title {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
  }
  .city-1 {
    width: 45%;
    margin-right: 5%;
  }
  .city-2 {
    width: 50%;
  }
}
</style>
